<template>
    <div id="query-view-item-container">
        <Query_Item class="sign-in-query-rec-title"/>
        <div v-for="item in pageSize" class="sign-in-query-rec" :key="'unsign-result' + item">
            <Query_Item :record="list[item - 1]" :index="(page - 1) * 10 + item" style="cursor: pointer" />
        </div>
        <Page :total="resultList.length" size="small" show-total @on-change="changePage"/>
    </div>
</template>

<script>

import local_vuex from "@sign/js/vuex";
import local_script from "@sign/js/util";
import Query_Item from "@sign/vue/query-item";

export default {
    data() {
        return {
            // 待显示列表
            list: [],
            // 默认页面下标
            page: 1,
            // 页面大小
            pageSize: 10
        }
    },
    props: {
        // 查询的结果列表
        resultList: {
            type: Array
        }
    },
    components: {
        Query_Item
    },
    mounted() {
        // 初始化
        this.changePage(1);
    },
    methods: {
        /**
         * 切换页面
         */
        changePage(index) {
            // 设置初始下标
            let _start = (index - 1) * this.pageSize;
            // 设置结束下标
            let _end = index * this.pageSize;
            // 获取待显示列表
            let res = this.resultList.slice(_start, _end);
            // 对待显示列表进行空行填充
            this.list = local_script.fillRecord(res);
            // 设置页面下标
            this.page = index;
        }
    },
    watch: {
        /**
         * 查询结果发生改变，进行初始化操作
         */
        resultList(val) {
            this.changePage(1);
        }
    }
}
</script>

<style lang="scss">
@import "@sign/scss/query-view.scss";
</style>